<template>
  <div class="post_main pt-5" style="background-color: white">
    <div class="all_discussion" v-if="this.show_info.length>0">
      <div class="post pb-3 pl-3" v-for="(post) in show_info" :key=post.post_id>
        <ul class="list-unstyled">
          <li class="media">
            <img :src="'/api/storage/post_img/'+post.post_img"
                 v-if="post.post_img=='default_post_img.jpg'"
                 class="mr-3"
                 alt="..." style="height: 100px;width: 100px">
            <img :src="'/api/storage/post_img/'+post.user_id+'/'+post.post_img"
                 v-else
                 class="mr-3"
                 alt="..." style="height: 100px;width: 100px">
            <div class="media-body">
              <div class="row">
                <div class="col-md-8">
                  <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                    <a class="mb-1" href="javascript:void(0);">{{post.post_title}}</a>
                  </router-link>
                </div>
                <!--                <div class="col-md-4" style="text-align: right;">-->
                <!--                  <span >点击数： ，评论数：</span>-->
                <!--                </div>-->
              </div>
              <div class="content pt-2">
                <p style="color: #6b6e71;font-size: 15px;">{{post.post_content}}</p>
              </div>
              <div class="pt-5" style="text-align: right;">
                <small class="text-right" style="color: #6b6e71;font-size: 15px;">阅读量：{{post.post_ctr}}</small>
                <p style="color: #6b6e71;font-size: 15px;">发布者：{{post.user_name}}
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更新时间：{{post.post_time}}</p>
              </div>
            </div>
          </li>
          <div class="dropdown-divider"></div>
        </ul>
      </div>
    </div>
    <div class="noFile" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block center" v-show="this.show_info.length>0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="postContainerPage"
          :page-size="postContainerSize"
          layout="total, prev, pager, next"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from '@/assets/noFile.png'
import {getAllPostInfo} from "@/api/Discussion";

export default {
  name: "experience_discussion",
  data() {
    return {
      nullContainer: "暂无帖子，快来发布哦~",
      postContainerPage:0, // 分页的数据：当前页数
      postContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      imgs: {
        noInfo
      },
      show_info:[],
      post_info:[],
      post_category:2,



    }
  },
  methods:{
    // 获取所有信息
    init(){

      getAllPostInfo({
        post_category:this.post_category
      }).then(res => {
          this.post_info=res.data.data;
          this.getShowPost();
      });

    },
    //分页
    getShowPost(){
      this.postContainerSize=parseInt(10);
      this.show_info = this.post_info.slice((this.postContainerPage - 1) * this.postContainerSize, this.postContainerPage * this.postContainerSize);
      this.total=parseInt(this.post_info.length);
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.postContainerPage= parseInt(val);
      this.getShowPost();

    },


  },
  created() {

    let _this = this;

    _this.postContainerPage=parseInt(1);

    _this.init();

  },
  mounted() {

  },



}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  letter-spacing:3px;
}
/*新闻标题*/
.media-body a{
  font-size: 20px;
  color: black;
}
.media-body a:hover{
  color: #2a7f61;
}
/*无数据图*/
.noFile{
  padding-top: 200px;
  padding-bottom: 200px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
</style>
